<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="iso-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

<title>Bootstrap, from Twitter</title>

<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui-1.10.2.custom.js"></script>

<!-- Le styles -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link href="css/bootswatch.css" rel="stylesheet">
<link href="css/jquery-ui-1.10.2.custom.css" rel="stylesheet">

<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

</head>


<body class="preview" id="top">

	<div class="navbar navbar-inverse navbar-fixed-top">
		<div class="navbar-inner">
			<div class="container">
				<a class="btn btn-navbar" data-toggle="collapse"
					data-target=".nav-collapse"> <span class="icon-bar"></span> <span
					class="icon-bar"></span> <span class="icon-bar"></span>
				</a> <a class="brand" href="#">Project name</a>
				<div class="nav-collapse collapse">
					<ul class="nav">
						<li class="active"><a href="#">Home</a></li>
						<li><a href="#about">About</a></li>
						<li><a href="#contact">Contact</a></li>
						<li class="dropdown"><a href="#" class="dropdown-toggle"
							data-toggle="dropdown">Dropdown <b class="caret"></b></a>
							<ul class="dropdown-menu">
								<li><a href="#">Action</a></li>
								<li><a href="#">Another action</a></li>
								<li><a href="#">Something else here</a></li>
								<li class="divider"></li>
								<li class="nav-header">Nav header</li>
								<li><a href="#">Separated link</a></li>
								<li><a href="#">One more separated link</a></li>
							</ul></li>
					</ul>
					<form class="navbar-form pull-right">
						<input class="span2" type="text" placeholder="Email"> <input
							class="span2" type="password" placeholder="Password">
						<button type="submit" class="btn">Sign in</button>
					</form>
				</div>
				<!--/.nav-collapse -->
			</div>
		</div>
	</div>
	<!-- FIN DEL MENU PRINCIPAL -->


	<div class="container">


		<div class="row">

			<a href="#ventana_modal" role="button" class="btn"
				data-toggle="modal">Abrir ventana modal</a>

			<!-- Ventana Modal -->
			<div id="ventana_modal" class="modal hide fade" tabindex="-1"
				role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">x</button>
					<h3>Cabecera</h3>
				</div>
				<div class="modal-body">
					<p>Cuerpo</p>
				</div>
				<div class="modal-footer">
					<button class="btn" data-dismiss="modal" aria-hidden="true">Cerrar</button>
					<button class="btn btn-primary">Grabar cambios</button>
				</div>
			</div>

		</div>
		<br />
		<br />
		<br />
		<br />


		<section>

			<ul class="nav nav-tabs" id="menuTab">
				<li><a href="#tab_inicio" data-toggle="tab">Inicio</a></li>
				<li><a href="#tab_productos" data-toggle="tab">Productos</a></li>
				<li><a href="#tab_servicios" data-toggle="tab">Servicios</a></li>
				<li><a href="#tab_portafolio" data-toggle="tab">Portafolio</a></li>
			</ul>

			<div class="tab-content">
				<div class="tab-pane active" id="tab_inicio">Contenido de
					inicio...</div>
				<div class="tab-pane" id="tab_productos">Contenido de
					productos...</div>
				<div class="tab-pane" id="tab_servicios">Contenido de
					servicios...</div>
				<div class="tab-pane" id="tab_portafolio">Contenido de
					portafolio...</div>
			</div>

		</section>


		<section>

			<div class="accordion" id="accordion2">
				<div class="accordion-group">
					<div class="accordion-heading">
						<a class="accordion-toggle" data-toggle="collapse"
							data-parent="#accordion2" href="#collapseOne"> T&iacute;tulo
							#1 </a>
					</div>
					<div id="collapseOne" class="accordion-body collapse in">
						<div class="accordion-inner">Contenido #1</div>
					</div>
				</div>
				<div class="accordion-group">
					<div class="accordion-heading">
						<a class="accordion-toggle" data-toggle="collapse"
							data-parent="#accordion2" href="#collapseTwo"> T&iacute;tulo
							#2 </a>
					</div>
					<div id="collapseTwo" class="accordion-body collapse">
						<div class="accordion-inner">Contenido #2</div>
					</div>
				</div>
			</div>

		</section>


		<section>


			<div id="carrusel_principal" class="carousel slide">

				<!-- Carousel items -->
				<div class="carousel-inner">
					<div class="active item">
						<img src="img/machupicchu1.jpg" />
						<div class="carousel-caption">
							<h4>Machupicchu</h4>
							<p>Vista completa. Foto del 2011.</p>
						</div>
					</div>
					<div class="item">
						<img src="img/machupicchu2.jpg" /><
						<div class="carousel-caption">
							<h4>Machupicchu</h4>
							<p>Vista lateral. Foto del 2009.</p>
						</div>
					</div>
				</div>
				<!-- Carousel nav -->
				<a class="carousel-control left" href="#carrusel_principal"
					data-slide="prev">&lsaquo;</a> <a class="carousel-control right"
					href="#carrusel_principal" data-slide="next">&rsaquo;</a>
			</div>

		</section>

		<hr>

		<footer>
			<p>&copy; 2013 David Rodr&iacute;guez Condezo</p>
		</footer>

	</div>
	<!-- /container -->

	<!-- Le javascript
    ================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->

	<script src="js/bootstrap-affix.js"></script>
	<script src="js/bootstrap-alert.js"></script>
	<script src="js/bootstrap-button.js"></script>
	<script src="js/bootstrap-carousel.js"></script>
	<script src="js/bootstrap-collapse.js"></script>
	<script src="js/bootstrap-dropdown.js"></script>
	<script src="js/bootstrap-modal.js"></script>
	<script src="js/bootstrap-tooltip.js"></script>
	<script src="js/bootstrap-popover.js"></script>
	<script src="js/bootstrap-scrollspy.js"></script>
	<script src="js/bootstrap-tab.js"></script>
	<script src="js/bootstrap-transition.js"></script>
	<script src="js/bootstrap-typeahead.js"></script>

	<script>
	$('#ventana_modal').modal( {
		keyboard : false,
		show : false,
		backdrop : 'static'		
	} );
	
	 $(function () {
		$('#menuTab a:last').tab('show');
	 });

	$('#carrusel_principal').carousel({
		interval : 2000
	});
	
	</script>

</body>
</html>
